<template>
  <a-flex>
    <a-flex vertical gap="middle" class="operations">
      <a-typography-text style="color: #1677ff">创建任务</a-typography-text>
      <a-button
        type="primary"
        :style="btnStyle('#52c41a', '#95de64')"
        @click="createFileTask"
      >
        <template #icon>
          <Icon :component="h(DownloadIcon)" />
        </template>
        文件
      </a-button>
      <a-button
        type="primary"
        :style="btnStyle('#faad14', '#ffd666')"
        @click="createMagnetTask"
      >
        <template #icon>
          <Icon :component="h(MagnetIcon)" />
        </template>
        磁力
      </a-button>
      <a-button
        type="primary"
        :style="btnStyle('#fa541c', '#ff9c6e')"
        @click="createBtTask"
      >
        <template #icon>
          <Icon :component="h(FlashIcon)" />
        </template>
        BT
      </a-button>
    </a-flex>
    <div class="content">
      <a-flex class="category" justify="space-between">
        <a-segmented
          v-model:value="apis.selectStatus"
          :options="statusOptions"
          @change="getTasks"
        />
        <a-input-search
          v-model:value="searchName"
          placeholder="请输入名称"
          style="width: 240px"
          enter-button
          allow-clear
          @search="getTasks"
        />
        <a-space>
          <a-button
            style="
              color: #389e0d;
              border-color: #389e0d;
              outline-color: #95de64;
            "
            :icon="h(ReloadOutlined)"
            @click="getTasks"
          />
          <a-button
            danger
            :icon="h(DeleteOutlined)"
            @click="onClearTask"
            :disabled="apis.tasks.length == 0"
          />
        </a-space>
      </a-flex>
      <div class="list">
        <a-empty
          v-if="apis.tasks.length == 0"
          style="padding-top: 120px"
          description="没有任务，快来创建吧！"
        />
        <a-flex vertical gap="small" v-else>
          <TaskItem
            v-for="task in apis.tasks"
            :task="task"
            :key="task.id"
            @after="getTasks"
          />
        </a-flex>
      </div>
    </div>
    <CreateTask ref="createTask" @after="getTasks" />
  </a-flex>
</template>

<script setup lang="ts">
import DownloadIcon from "@/assets/icons/download.svg?component";
import MagnetIcon from "@/assets/icons/magnet.svg?component";
import FlashIcon from "@/assets/icons/flash.svg?component";
import { h, onMounted, ref } from "vue";
import CreateTask from "@/components/CreateTask.vue";
import { App } from "ant-design-vue";
import { Category, Status, useApisStore, type QueryReq } from "@/stores/apis";
import { DeleteOutlined, ReloadOutlined } from "@ant-design/icons-vue";
import Icon from "@ant-design/icons-vue";
import TaskItem from "@/components/TaskItem.vue";
import { btnStyle } from "@/components/task";

const { message, modal } = App.useApp();
const apis = useApisStore();
const createTask = ref<InstanceType<typeof CreateTask> | null>(null);
const searchName = ref<string>();
const statusOptions = [
  { label: "全部", value: "all" },
  { label: "进行中", value: Status.Active },
  { label: "已完成", value: Status.Complete },
];

onMounted(() => getTasks());

function createFileTask() {
  if (createTask.value) {
    createTask.value.openModal(Category.File);
  }
}

function createMagnetTask() {
  if (createTask.value) {
    createTask.value.openModal(Category.Magnet);
  }
}

function createBtTask() {
  if (createTask.value) {
    createTask.value.openModal(Category.BitTorrent);
  }
}

function getTasks() {
  const req: QueryReq = {};
  if (searchName.value) {
    req.name = searchName.value;
  }
  if (apis.selectStatus != "all") {
    req.status = apis.selectStatus;
  }
  apis.getTasks(req).catch((error) => message.error(error));
}

function onClearTask() {
  modal.warning({
    title: "清除提示",
    content: "是否清除全部任务?",
    okText: "确认",
    closable: true,
    onOk() {
      const gids = apis.tasks.map((t) => t.gid);
      apis
        .clearTask(gids)
        .then((data) => {
          message.success(data);
          getTasks();
        })
        .catch((error) => message.error(error));
    },
  });
}
</script>

<style scoped>
.operations {
  width: 240px;
  height: 100vh;
  padding: 16px;
  border-right: 1px solid rgba(5, 5, 5, 0.06);
}

.content {
  height: calc(var(--content-height));
  width: 960px;
  display: flex;
  flex-direction: column;
}

.category {
  flex: 0 0 auto;
  padding: 16px 24px;
}

.list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 24px;
}
</style>
